<template>
	<view>
		<view class="uni-flex uni-row">
			<image v-bind:src="store.logoUrl" mode="scaleToFill" style="height: 200upx;width: 200upx;"></image>
			<view class="uni-flex-item uni-column uni-flex" style="text-align: center;">
				<text class="uni-flex-item">{{store.name}}</text>
				<text class="uni-flex-item">{{storeAddress.provinceName}}{{storeAddress.cityname}}{{storeAddress.districtName}}{{storeAddress.streetName}}</text>
				<text class="uni-flex-item">{{store.desc}}</text>
			</view>
		</view>
		<view class="page-section page-section-gap" style="text-align: center;">
			<a v-bind:href="'http://api.map.baidu.com/geocoder?output=html&location='
			+storeAddress.latitude+','+storeAddress.longitude"
			 target='_blank'>
				<image v-bind:src="'http://api.map.baidu.com/staticimage/v2?width=500&height=300&center='
				+storeAddress.longitude+','+storeAddress.latitude+'&ak=6rSAArlg2gnhQMjH7ur1bbHuOGHF8rzS'
				+'&markers='+storeAddress.longitude+','+storeAddress.latitude"
				 mode="aspectFill"></image>
			</a>
		</view>
		<scroll-view scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
			<view class="uni-list">
				<view class="uni-list-cell" @click="goService(commodity)" hover-class="uni-list-cell-hover" v-for="(commodity,index) in commodities"
				 :key="index">
					<view class="uni-media-list">
						<image class="uni-media-list-logo" v-bind:src="commodity.logoUrl"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{commodity.name}}</view>
							<view class="uni-media-list-text-bottom uni-ellipsis">{{commodity.desc}}</view>
						</view>
						<view class="uni-media-list-body" style="align-items: center;">
							<view class="uni-text-small">{{commodity.type}}</view>
							<view class="uni-text">{{commodity.price}}</view>
						</view>
						<view style="align-self: center;" class="uni-row" @click.stop>
							<uni-icons @click="deleteOneShoppingCart(store.id,commodity.id)" type="minus"></uni-icons>
							<text>{{shoppingCarts[commodity.id]}}</text>
							<uni-icons @click="saveShoppingCart(store.id,commodity.id)" type="plus"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="uni-flex uni-row uni-flex-item" style="bottom: 0rpx;position: fixed;height: 90rpx;">
			<view class="uni-flex-item" style="align-self: center;">
				<text>{{totalPrice}}</text>
			</view>
			<view class="uni-flex-item" style="position: fixed;right: 0rpx; background-color: #FF3333;">
				<button type="primary" @click="goShoppingCart()">去结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue'
	import uniIcons from '../../components/uni-icons/uni-icons.vue'
	import {
		servicesExchange
	} from '../../common/dataExchange.js';


	export default {
		components: {
			uniNavBar,
			uniIcons
		},
		data() {
			return {
				commodities: [],
				store: {},
				storeAddress: {},
				shoppingCarts: {},
				totalPrice: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},

		onLoad: async function(data) {
			// 获取商店地址数据
			uni.request({
				url: this.baseUrl + '/storeAddress/getByStoreId?storeId=' + data.storeId,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.storeAddress = res.data.data;
				}
			});
			// 获取商店数据
			uni.request({
				url: this.baseUrl + '/store/getById?id=' + data.storeId,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.store = res.data.data;
				}
			});
			// 获取服务list
			await new Promise((resolve, reject) => {
				uni.request({
					url: this.baseUrl + '/service/listByStoreId?storeId=' + data.storeId,
					method: 'GET',
					data: {},
					success: res => {
						console.log(res);
						var commodities = res.data.data;
						this.commodities = servicesExchange(commodities);
						resolve('suc');
					}
				});
			});
			// 获取购物车数据
			await new Promise((resolve, reject) => {
				uni.request({
					url: this.baseUrl + '/shoppingCart/listByStoreIdAndCustomerUserId',
					method: 'POST',
					data: {
						customerUserId: 1,
						storeId: data.storeId
					},
					success: res => {
						console.log(res);
						var shoppingCarts = res.data.data;
						for (let commodity of this.commodities) {
							if (this.shoppingCarts[commodity.id] == null) {
								this.shoppingCarts[commodity.id] = 0;
							}
						}
						for (let shoppingCart of shoppingCarts) {
							this.shoppingCarts[shoppingCart.commodityId] = shoppingCart.count;
						}
						resolve('suc');
					}
				});
			});

			this.calcTotalPrice();
			this.$forceUpdate();

		},
		methods: {
			calcTotalPrice: function() {
				console.log(this.shoppingCarts);
				// 计算总价
				var totalPrice = 0;
				Object.entries(this.shoppingCarts).forEach((shoppingCart) => {
					var key = shoppingCart[0];
					var value = shoppingCart[1];
					for (let service of this.commodities) {
						if (service.id == key) {
							totalPrice = totalPrice + (service.price * value);
						}
					}
				});
				this.totalPrice = totalPrice.toFixed(2);
			},

			goService: function(service) {
				uni.navigateTo({
					url: '../service/service?commodityId=' + service.id
				});
			},
			goShoppingCart: function() {
				uni.navigateTo({
					url: '../shoppingCart/shoppingCart'
				});
			},
			saveShoppingCart: function(storeId, commodityId) {
				// this.shoppingCarts[`test-${seid}`] test-2
				// this.shoppingCarts[commodityId]++;
				this.shoppingCarts[commodityId]++;
				this.calcTotalPrice();
				this.$forceUpdate();
				uni.request({
					url: this.baseUrl + '/shoppingCart/save',
					method: 'POST',
					data: {
						customerUserId: 1,
						storeId: storeId,
						commodityId: commodityId
					}
				});
			},
			deleteOneShoppingCart: function(storeId, commodityId) {
				if (this.shoppingCarts[commodityId] > 0) {
					this.shoppingCarts[commodityId]--;
				}
				this.calcTotalPrice();
				this.$forceUpdate();

				uni.request({
					url: this.baseUrl + '/shoppingCart/deleteOne',
					method: 'POST',
					data: {
						customerUserId: 1,
						storeId: storeId,
						commodityId: commodityId
					}
				});
			}
		},
		upper: function(e) {
			console.log(e)
		},
		lower: function(e) {
			console.log(e)
		},
		scroll: function(e) {
			console.log(e)
			this.old.scrollTop = e.detail.scrollTop
		},
		goTop: function(e) {
			this.scrollTop = this.old.scrollTop
			this.$nextTick(function() {
				this.scrollTop = 0
			});
			uni.showToast({
				icon: "none",
				title: "纵向滚动 scrollTop 值已被修改为 0"
			})
		}
	}
</script>

<style>
</style>
